<template>
  <div id="search">
    <div id="head">
      <div id="sousuo">
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div id="content">
        <input
          type="text"
          placeholder="请输入片名,主演或演员"
        >
      </div>
      <div id="quxiao">
        <!--  取消 -->
        <a
          href="#"
          @click="$router.back()"
        >取消</a>
      </div>
      <div id="luyin">
        <i class="iconfont icon-qichejietubiaoku-"></i>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="tab">
      <div class="tab-title">
        <div
          class="swiper-container"
          id="swiper-container2"
        >
          <div
            class="swiper-wrapper"
            id="swiper-wrapper-div"
          >
            <div
              class="swiper-slide"
              v-for="(item,index) in searchHeader"
              :key='index'
              @click="display(index)"
            >
              <span :class="{cur:item.curFlag}">{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="tc"
        v-for="(item,index) in searchHeader"
        :key="index"
        v-show="item.curFlag"
      >
        <ul class="lists">
          <li
            v-for="(itemData,indexData) in item.searchData"
            :key="indexData"
          >
            <span
              class="num"
              :class="rankcolor[indexData]"
            > {{indexData+1}}</span>
            <span class="date">{{itemData}}</span>
            <span class="logo">
              <i class="iconfont icon-jiantou2"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import 'swiper/js/swiper.min.js'
export default {
  data () {
    return {
      rankcolor: [
        { rank1: 'rank1' },
        { rank2: 'rank1' },
        { rank3: 'rank3' }
      ],
      searchHeader: [
        {
          name: '热搜',
          curFlag: 'false',
          viewShow: '',
          searchData: ['传闻中的陈芊芊', '极限挑战', '创造2020', '斗罗大陆', '王牌对王牌', '奔跑吧 第四季', '一人之下']
        },
        {
          name: '热点',
          curFlag: 'false',
          viewShow: '',
          searchData: ['取消超生处罚', '特朗普碰瓷中国发言人', '美军对台军售案', '幸福触手可及', '北京下午三点的天', '巴基斯坦', '美国百年大溃堤']
        },
        {
          name: '电视剧',
          curFlag: 'false',
          viewShow: '',
          searchData: ['幸福触手可及', '传闻中的陈芊芊', '好妻子', '清平乐', '秋蝉', '龙鳞米宽', '长相守', '安家', '陈情令']
        },
        {
          name: '少儿',
          curFlag: 'false',
          viewShow: '',
          searchData: ['小猪佩奇', '熊出没', '超级飞侠', '海绵宝宝', '猫和老鼠', '萌鸡小队2']
        },
        {
          name: '综艺',
          curFlag: 'false',
          viewShow: '',
          searchData: ['极限挑战', '创造2020', '王牌对王牌', '奔跑吧', '向往的生活']
        },
        {
          name: '电影',
          curFlag: 'false',
          viewShow: '',
          searchData: ['九叔归来', '大神猴', '狩猎者', '黑道之家']
        },
        {
          name: '游戏',
          curFlag: 'false',
          viewShow: '',
          searchData: ['极限挑战', '创造2020', '王牌对王牌', '奔跑吧', '向往的生活']
        }
      ]
    }
  },
  methods: {
    returnMsite () {
      this.$router.push({
        name: 'msite' // 跳转到的路径名称
      })
    },
    display (index) {
      for (let i = 0; i < this.searchHeader.length; i++) {
        if (i === index) {
          this.searchHeader[i].curFlag = true
          this.searchHeader[i].viewShow = true
        } else {
          this.searchHeader[i].curFlag = false
          this.searchHeader[i].viewShow = false
        }
      }
    }
  },
  mounted () {
    // 创建一个swiper实例对象，来实现轮播
    new Swiper('#swiper-container2', {// eslint-disable-line
      watchSlidesProgress: true,
      watchSlidesVisibility: true,
      slidesPerView: 4
    })
    for (let i = 1; i < this.searchHeader.length; i++) {
      this.searchHeader[i].curFlag = false
      //   this.searchHeader[i].viewShow = false
    }
  }
}
</script>

<style>
#head {
  width: 100%;
  height: 65px;
  z-index: 999;
  overflow: hidden;
  background-color: white;
  border-bottom: 1px solid rgb(216, 216, 216);
  margin-top: -10px;
}
#sousuo {
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}
#sousuo .iconfont {
  font-size: 20px;
}
#content > input {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  width: 60%;
  height: 2em;
  border-color: rgb(226, 223, 223);
}
#luyin {
  float: right;
  width: 2em;
  margin-right: 15px;
  margin-top: 25px;
  height: 2em;
}
#quxiao {
  float: right;
  width: 2em;
  margin-right: 10px;
  margin-top: 25px;
  height: 2em;
  color: black;
}
/* swiper轮播图 */
.tab {
  width: 100%;
  margin-top: -45px;
}
.tab-title {
  display: flex;
  z-index: 999;
}

.swiper-slide > span {
  width: 100%;
  text-align: center;
  letter-spacing: 3px; /*  字间距 */
  font-size: 1.4em;
  user-select: none;
}
.cur {
  border-bottom: 1.5px solid red;
  margin-bottom: -1px;
  background-color: white;
  color: red;
}
.lists {
  width: 100%;
  padding-left: 0;
}
.lists li {
  width: 100%;
  height: 33px;
  line-height: 33px;
  background: white;
  border-bottom: 1px solid rgb(230, 227, 227);
}
.date {
  float: left;
  margin-left: 10px;
}
.logo {
  float: right;
  margin-right: 5px;
}
.num {
  float: left;
  width: 18px;
  height: 16px;
  line-height: 18px;
  font-size: 1em;
  color: rgb(0, 0, 0);
  background-color: rgb(226, 229, 226);
  margin-top: 8px;
  margin-left: 5px;
}

.rank1 {
  background-color: red;
}
.rank2 {
  background-color: rgb(247, 170, 3);
}
.rank3 {
  background-color: rgb(255, 230, 3);
}

.tc {
  width: 100%;
  border-top: none;
  text-align: center;
  margin-top: 5px;
}
.tc > ul {
  width: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 1em;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>
